<template>
  <el-upload
      style="width: 100%"
    class="upload-container"
    action="#"
    :http-request="httpRequest"
    :disabled="disabled"
    :file-list="fileList"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :accept="accept"
  >
    <el-button
      v-if="btnShow && !disabled"
      :disabled="disabled"
      size="small"
      type="primary"
      >{{ btnText }}</el-button
    >
    <div v-if="btnShow && this.tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
  </el-upload>
</template>

<script>
import publicApi from '@/api/public';
export default {
  props: {
    value: {
      default: () => ({}),
    },
    businessTable: {
      type: String,
      default: null,
    },
    businessId: {
      type: String,
      default: null,
    },
    subType: {
      type: String,
      default: null,
    },
    btnText: {
      default: '上传',
    },
    tip: {
      default: null,
    },
    disabled: {
      default: false,
    },
    accept: {
      default: null,
    }
  },
  data() {
    return {
      fileList: [],
      btnShow: true,
    };
  },
  watch: {
    value: {
      handler(data) {
        if (data) {
          this.fileList = [...this.fileList, ...data.map((item) => {
            return {
              ...item,
              name: item.fileName,
              url: item.fileUri,
            }
          })]
        } else {
          this.fileList = [];
        }
      },
      immediate: true,
    },
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    async httpRequest(data) {
      const formData = new FormData();
      formData.append('upload', data.file);
      formData.append('businessTable', this.businessTable);
      formData.append('businessId', this.businessId);
      formData.append('subType', this.subType);
      this.$emit('uploading', true);
      const res = await publicApi.uploadFile(formData).finally(() => {
        this.$emit('uploading', false);
      });
      this.$emit('input', res);
      this.$emit('change', res);
    },
    containSpecial( str ) {
      var containSpecial = RegExp(/[/\\<>{}~!@#$%^&*]+/);
      return ( containSpecial.test(str) );
    },
    beforeUpload(file){
      if (this.containSpecial(file.name)) {
        this.$message.error('文件名不能包含特殊字符');
        return false;
      }
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('文件大小不能超过10M');
        return false;
      }
      const fileType = file.name.split('.').pop();
      if (this.accept && !this.accept.includes(fileType?.toLowerCase())) {
        this.$message.error('文件格式不正确');
        return false;
      }
      return true;
    },
    handlePreview(file) {
      window.open(file.fileUri);
    },
    async handleRemove(file) {
      if (file.id) {
        let params = {
          id: file.id
        }
        await publicApi.deleteFile(params);
        this.fileList = this.fileList.filter(item => item.id !== file.id);
        this.$emit('input', this.fileList);
        this.$emit('change', this.fileList);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.upload-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
::v-deep {
  .el-icon-close-tip {
    display: none !important;
  }
  .el-upload-list--text {
    width: 100%;
  }
}
</style>
